<template>
	<app-layout>
		<view v-if="is_show && orderDetail" class='order-detail-box'>
			<app-order-banner :title='orderDetail.status_text'></app-order-banner>
			<view>
				<!-- <template
					v-if='orderDetail.is_send == 1 && orderDetail.detailExpress.length == 1 && orderDetail.send_type != 2'>
					<view class='express-box'>
						<template v-if="orderDetail.detailExpress[0].send_type == 1">
							<app-order-express :pageUrl='getPageUrl' :express='orderDetail.detailExpress[0].express'
								:express_no='orderDetail.detailExpress[0].express_no'
								:merchant_remark='orderDetail.detailExpress[0].merchant_remark'>
							</app-order-express>
						</template>
						<template v-else>
							物流信息: 其它方式({{ orderDetail.detailExpress[0].express_content }})
						</template>
					</view>
				</template> -->
				<!-- <template
					v-else-if='orderDetail.detailExpress.length > 1 || (orderDetail.is_send == 0 && orderDetail.detailExpress.length >= 1)'>
					<app-jump-button :url="getPageUrl">
						<view class='e-box dir-left-nowrap cross-center'>
							<view class='dir-top-nowrap box-grow-1 text'>
								该订单已拆成多个包裹发货，点击查看详情
							</view>
							<image class='box-grow-0 img' src='/static/image/icon/arrow-right.png'></image>
						</view>
					</app-jump-button>
				</template> -->
				<view v-if="orderDetail.sign !== 'vip_card'" class="order-label">配送信息</view>
				<view v-if="orderDetail.sign !== 'vip_card'" class='order-list dir-top-nowrap'>
					<view class='dir-left-nowrap'>
						<view class='box-grow-0'>联系人：</view>
						<view class="box-grow-1">{{ orderDetail.name }}</view>
						<view class='box-grow-0'>{{ orderDetail.mobile }}</view>
					</view>
					<view v-if="orderDetail.goods_type === 'ecard'
                        || (orderDetail.is_send
                        && orderDetail.sign != 'scan_code_pay'
                        && orderDetail.is_show_send_type == 1)">
						<block v-if="orderDetail.send_type == 0">发货方式：快递发货</block>
						<block v-if="orderDetail.send_type == 1">发货方式：去实体店提货</block>
						<block v-if="orderDetail.send_type == 2">发货方式：同城配送</block>
						<block v-if="orderDetail.goods_type === 'ecard'">发货方式：自动发货</block>
					</view>

					<!-- 快递 -->
					<view v-if="orderDetail.send_type != 1 && orderDetail.address" class="dir-left-nowrap">
						<view class="box-grow-0">收货地址：</view>
						<view class="box-grow-1 text">{{ orderDetail.address }}</view>
					</view>

					<!-- 门店 -->
					<block v-if="orderDetail.send_type == 1 && orderDetail.goods_type === 'goods'">
						<view class="dir-left-nowrap">
							<view class="box-grow-0">实体店名称：</view>
							<view class="box-grow-1 text">
								{{ orderDetail.showstore ? orderDetail.showstore.name : orderDetail.store.name }}
							</view>
						</view>
						<view class="dir-left-nowrap">
							<view class="box-grow-0">联系方式：</view>
							<view class="box-grow-1">
								{{ orderDetail.showstore ? orderDetail.showstore.mobile : orderDetail.store.mobile }}
							</view>
						</view>
						<view class="dir-left-nowrap">
							<view class="box-grow-0">实体店地址：</view>
							<view class="box-grow-1 text">
								{{ orderDetail.showstore ? orderDetail.showstore.address : orderDetail.store.address }}
							</view>
						</view>
						<view @click="navigation(orderDetail)" class="order-list-btn">导航
						</view>
					</block>

					<!-- 同城配送 -->
					<block v-if="orderDetail.delivery_config">
						<view class="dir-left-nowrap">
							<view class="box-grow-0">发货地址：</view>
							<view class="box-grow-1">{{ orderDetail.delivery_config.address.address }}</view>
						</view>
						<view class="dir-left-nowrap" v-if="orderDetail.delivery_config.contact_way">
							<view class="box-grow-0">联系方式：</view>
							<view class="box-grow-1">{{ orderDetail.delivery_config.contact_way }}</view>
						</view>
						<view class="dir-left-nowrap" v-if="orderDetail.delivery_config.explain">
							<view class="box-grow-0">配送说明：</view>
							<view class="box-grow-1">{{ orderDetail.delivery_config.explain }}</view>
						</view>
					</block>
				</view>

				<!-- 电子卡密 -->
				<template v-if="orderDetail.type_data.ecard.length > 0">
					<view style="margin:24rpx 0;">
						<view class="preferential-box dir-left-nowrap main-between">
							<view>
								卡密信息
							</view>
							<view @click="go_eCard">
								<text>使用说明</text>
								<image src="/static/image/icon/arrow-right.png" class="instructions"></image>
							</view>
						</view>
						<view class="ecard  dir-top-wrap" :style="{paddingBottom: ecard.length >= 1 ? '20rpx' : '0'}">
							<view class="item dir-top-nowrap" v-for="(item, key) in ecard" :key="key">
								<view style="margin-bottom: 10rpx;">【{{ key + 1 }}】</view>
								<view class="dir-left-nowrap cross-center">
									<view class='box-grow-1'>
										<view class="text" v-for="(n, d) in item" :key="d">{{ n.key }}：{{ n.value }}
										</view>
									</view>
									<view @click='copyTextEcard(item)' class='box-grow-0 detail-btn' size='mini'>复制全部
									</view>
								</view>
							</view>
							<view @click="ecard = orderDetail.type_data.ecard"
								class="expand dir-left-nowrap main-center cross-center"
								v-if="ecard.length === 1 && orderDetail.type_data.ecard.length > 1">
								<text>点击展开</text>
								<image src="/static/image/icon/icon-down.png"></image>
							</view>
						</view>
					</view>
				</template>

				<template v-if="orderDetail.send_type == 2
                    && ((orderDetail.detailExpress.length == 1 || orderDetail.city_name)
                    && orderDetail.is_send == 1)">
					<view class="order-info-box dir-top-nowrap delivery"
						style="margin-top: -20rpx;border-top: 1rpx solid #e2e2e2" v-if="orderDetail.send_type == 2">
						<view class="dir-left-nowrap cross-center city-service">
							<image class="head" src="/static/image/icon/deliveryman.png"></image>
							<template
								v-if="orderDetail.detailExpress[0].city_name && orderDetail.detailExpress[0].city_mobile">
								<view class="info-box dir-top-nowrap box-grow-1">
									<view class="info-label">配送员</view>
									<view class="info">
										{{
                                            orderDetail.city_name ? orderDetail.city_name : orderDetail.detailExpress[0].city_name
                                        }}
										{{
                                            orderDetail.city_mobile ? orderDetail.city_mobile : orderDetail.detailExpress[0].city_mobile
                                        }}
									</view>
								</view>
								<view class="icon-box">
									<app-jump-button open_type="tel"
										:number="orderDetail.city_mobile ? orderDetail.city_mobile : orderDetail.detailExpress[0].city_mobile">
										<image class="icon" src="/static/image/icon/store-tel.png"></image>
									</app-jump-button>
								</view>
								<!-- 第三方配送才有地图信息 -->
								<view v-if="orderDetail.detailExpress[0].send_type == 1" class="icon-box">
									<app-jump-button open_type="navigate"
										:url="'/pages/order/city-map/city-map?express_id=' + orderDetail.detailExpress[0].id">
										<image class="icon" src="/static/image/icon/shipping-address.png"></image>
									</app-jump-button>
								</view>
							</template>
							<template v-else>
								<view class="await-man">等待分配骑手</view>
							</template>
						</view>
						<block v-if="orderDetail.detailExpress[0].status != 101">
							<view class="dir-left-wrap">
								<view class="goods-image" v-for="erItem in orderDetail.detailExpress[0].expressRelation"
									:key="erItem.id">
									<app-image width="120rpx" height="120rpx"
										:imgSrc="erItem.orderDetail.goods_info.goods_attr.cover_pic"></app-image>
								</view>
							</view>
							<view class="goods-num">共{{ orderDetail.detailExpress[0].goods_num }}件商品</view>
						</block>
					</view>
				</template>

				<!--------------订单信息---------------->
				<view class="order-label">订单信息</view>
				<view class="order-list dir-top-nowrap">
					<view class="dir-left-nowrap cross-center">
						<view class="box-grow-0">订单编号：</view>
						<view class="box-grow-1">{{ orderDetail.order_no }}</view>
						<view @click="copyText(orderDetail.order_no)" style="position: absolute;right: 24rpx"
							class="box-grow-0 detail-btn">复制
						</view>
					</view>
					<view>下单时间：{{ orderDetail.created_at }}</view>
					<view v-if="orderDetail.pay_type == 1">支付方式：线上支付</view>
					<view v-if="orderDetail.pay_type == 2">支付方式：货到付款</view>
					<view v-if="orderDetail.pay_type == 3">支付方式：余额支付</view>
					<view v-if="orderDetail.sign == 'exchange'">兑换码：{{orderDetail.exchange_code.code}}</view>
				</view>

				<!-- <template v-if="orderDetail.sign === 'advance'">
					<view class="preferential-box dir-top-nowrap">
						<view class='dir-left-nowrap item' style="margin-bottom: 28rpx;">
							<text class='box-grow-1' style="font-size: 28rpx;">
								商品总额：￥{{
                                    orderDetail.total_goods_original_price
                                }}，定金￥{{
                                    orderDetail.advance_order.deposit
                                }}抵扣￥{{ orderDetail.advance_order.swell_deposit }}
							</text>
						</view>
						<view class="item-box">
							<view class="dir-left-nowrap item ">
								<text class='box-grow-1' style="color: #ff4544;font-size: 24rpx;">阶段一</text>
							</view>
							<view class="dir-left-nowrap item " style="margin-top: 20rpx;">
								<text class='box-grow-1' style="color: #666666;font-size: 28rpx;">
									定金
								</text>
								<text class='box-grow-0'>￥{{ orderDetail.advance_order.deposit }}</text>
							</view>
						</view>
						<view class="item-box" style="margin-top:24rpx;">
							<view class="dir-left-nowrap item ">
								<text class='box-grow-1' style="color: #ff4544;font-size: 24rpx;">阶段二</text>
							</view>
							<view class="dir-left-nowrap item " style="margin-top: 20rpx;">
								<text class='box-grow-1' style="color: #666666;font-size: 28rpx;">
									尾款
								</text>
								<text class='box-grow-0'>￥{{ orderDetail.final_price }}</text>
							</view>
							<view class="dir-left-nowrap item " style="margin-top: 20rpx;"
								v-if="orderDetail.member_discount_price > 0">
								<text class='box-grow-1' style="color: #666666;font-size: 28rpx;">
									会员折扣
								</text>
								<text class='box-grow-0'>-￥{{ orderDetail.member_discount_price }}</text>
							</view>
							<view class="dir-left-nowrap item " style="margin-top: 20rpx;"
								v-if="orderDetail.advance_order.preferential_price > 0">
								<text class='box-grow-1' style="color: #666666;font-size: 28rpx;">
									活动优惠
								</text>
								<text class='box-grow-0'>-￥{{ orderDetail.advance_order.preferential_price }}</text>
							</view>
							<view class="dir-left-nowrap item " style="margin-top: 20rpx;"
								v-if="orderDetail.coupon_discount_price > 0">
								<text class='box-grow-1' style="color: #666666;font-size: 28rpx;">
									优惠券优惠
								</text>
								<text class='box-grow-0'>-￥{{ orderDetail.coupon_discount_price }}</text>
							</view>
							<view class="dir-left-nowrap item " style="margin-top: 20rpx;"
								v-if="orderDetail.plugin_data.discount_list.vip_discount">
								<text class='box-grow-1' style="color: #666666;font-size: 28rpx;">
									{{orderDetail.plugin_data.discount_list.vip_discount.label}}
								</text>
								<text
									class='box-grow-0'>-￥{{ orderDetail.plugin_data.discount_list.vip_discount.value }}</text>
							</view>
							<view class="dir-left-nowrap item " style="margin-top: 20rpx;"
								v-if="orderDetail.integral_deduction_price > 0">
								<text class='box-grow-1' style="color: #666666;font-size: 28rpx;">
									金币抵扣
								</text>
								<text class='box-grow-0'>-￥{{ orderDetail.integral_deduction_price }}</text>
							</view>
							<view class="dir-left-nowrap item " style="margin-top: 20rpx;">
								<text class='box-grow-1' style="color: #666666;font-size: 28rpx;">
									运费
								</text>
								<text class='box-grow-0'>￥{{ orderDetail.express_price }}</text>
							</view>
						</view>
						<view class="dir-left-nowrap item main-right" style="margin:28rpx 0 ;">
							合计：
							<span>
								<text v-if="orderDetail.plugin_data.exchange_count" class='price'>{{
                                        orderDetail.plugin_data.exchange_count
                                    }}{{ orderDetail.plugin_data.price_name }}+</text>
								<text class='box-grow-0'
									style="font-size: 28rpx;">￥{{ orderDetail.total_pay_price }}</text>
							</span>
						</view>
					</view>
				</template> -->

				<!------------商品信息------------------>
				<view class="order-label">商品信息</view>
				<view class='preferential-box dir-top-wrap' v-if="orderDetail.sign !== 'advance'">
					<view v-if="orderDetail.plugin_data.exchange_count == null" class='dir-left-nowrap item'
						style="border-bottom: 1rpx dotted #ccc;">
						<view class='box-grow-1'>商品全款</view>
						<view class='box-grow-0'>￥{{ orderDetail.total_goods_original_price }}</view>
					</view>
					<!-- <view v-if="orderDetail.plugin_data.exchange_count == null" class='dir-left-nowrap item'>
						<view class='box-grow-1'>商品定金</view>
						<view class='box-grow-0'>￥{{ orderDetail.total_goods_price }}</view>
					</view> -->
					<!-- <view v-if="orderDetail.plugin_data.exchange_count == null" class='dir-left-nowrap item'>
						<view class='box-grow-1'>商品总额</view>
						<view class='box-grow-0'>￥{{ orderDetail.total_goods_original_price }}</view>
					</view> -->
					<!-- 10.14 兑换修改为使用 -->
					<view v-if="orderDetail.plugin_data.exchange_count" class='dir-left-nowrap item'>
						<view class='box-grow-1'>使用{{ orderDetail.plugin_data.price_name }}</view>
						<view class='box-grow-0'>{{ orderDetail.plugin_data.exchange_count }}</view>
					</view>
					<!-- 10.14 添加白条或金币抵扣 -->
					<view class="" v-if="orderDetail.sign != 'integral_mall' && orderDetail.sign != 'jinbi_mall'">
						<text v-if="orderDetail.jfbt_type == 0">未使用金币抵扣</text>
						<view class="dir-left-nowrap item" v-if="orderDetail.jfbt_type == 1">
							<view class='box-grow-1'>使用金币抵扣</view>
							<view class='box-grow-0'>-￥{{orderDetail.original_discount_price1}}</view>
						</view>
						<view class="dir-left-nowrap item" v-if="orderDetail.jfbt_type == 2">
							<view class='box-grow-1'>使用金币白条抵扣</view>
							<view class='box-grow-0'>-￥{{orderDetail.original_discount_price1}}</view>
						</view>
						<!-- <view class='dir-left-nowrap item'>
							<view class='box-grow-1'>实体店需付金额</view>
							<view class='box-grow-0' v-if="orderDetail.jfbt_type == 0">
								￥{{ orderDetail.original_discount_price }}</view>
							<view class='box-grow-0' v-if="orderDetail.jfbt_type == 1 || orderDetail.jfbt_type == 2">
								￥{{ orderDetail.original_discount_price - orderDetail.original_discount_price1 }}</view>
						</view> -->
					</view>
					<!-- 9.22 10.14修改 -->
					<!-- <view v-if="orderDetail.total_goods_original_price > 0" class='dir-left-nowrap item'>
						<view class='box-grow-1'>实体店需付金额</view>
						<view class='box-grow-0'>￥{{ orderDetail.total_goods_original_price }}</view>
					</view> -->
					<!-- <view v-if="orderDetail.plugin_data.exchange_count >= 0" class='dir-left-nowrap item'>
						<view class='box-grow-1'>兑换金额</view>
						<view class='box-grow-0'>￥{{ orderDetail.total_goods_original_price }}</view>
					</view> -->
					<!-- 插件额外优惠 -->
					<!-- <view v-if="orderDetail.plugin_data && orderDetail.plugin_data.discount_list && sign !== 'advance'">
						<view v-for='item in orderDetail.plugin_data.discount_list' :key="item.id"
							class='dir-left-nowrap item'>
							<view class='box-grow-1'>{{ item.label }}</view>
							<view class='box-grow-0'>-￥{{ item.value }}</view>
						</view>
					</view> -->
					<view v-if='orderDetail.coupon_discount_price > 0' class='dir-left-nowrap item'>
						<view class='box-grow-1'>优惠券抵扣</view>
						<view class='box-grow-0'>-￥{{ orderDetail.coupon_discount_price }}</view>
					</view>
					<view v-if='orderDetail.integral_deduction_price > 0' class='dir-left-nowrap item'>
						<view class='box-grow-1'>金币抵扣</view>
						<view class='box-grow-0'>-￥{{ orderDetail.integral_deduction_price }}</view>
					</view>
					<view v-if="orderDetail.member_deduction_price_count > 0  && sign !== 'advance'"
						class='dir-left-nowrap item'>
						<view class='box-grow-1'>会员折扣</view>
						<view class='box-grow-0'>-￥{{ orderDetail.member_deduction_price_count }}</view>
					</view>
					<view v-if="orderDetail.full_reduce_price > 0  && sign !== 'advance'" class='dir-left-nowrap item'>
						<view class='box-grow-1'>满减优惠</view>
						<view class='box-grow-0'>-￥{{orderDetail.full_reduce_price}}</view>
					</view>
					<view class='dir-left-nowrap item'
						v-if="orderDetail.sign !== 'advance' && orderDetail.goods_type === 'goods'">
						<view class='box-grow-1'>运费</view>
						<view class='box-grow-0'>￥{{ orderDetail.express_price }}</view>
					</view>
					<view v-if="orderDetail.remark && orderDetail.goods_type === 'goods'" class='dir-top-nowrap item'>
						<view class='box-grow-1'>买家留言:</view>
						<view style="word-break: break-all" class='box-grow-0 t-extra-small-color'>{{
                                orderDetail.remark
                            }}
						</view>
					</view>
				</view>
				<view class='order-price-box cross-center dir-right-nowrap' v-if="orderDetail.sign !== 'advance'"
					style="  display: flex; justify-content: space-between;">

					<view>
						合计:
						<span>
							<text v-if="orderDetail.plugin_data.exchange_count" class='price'>{{
					                orderDetail.plugin_data.exchange_count
					            }}{{ orderDetail.plugin_data.price_name }}+</text>
							<text class='price'>￥{{ orderDetail.total_pay_price }}</text>
						</span>
					</view>

					<view class="" style="display: flex;">
						<view class="box-grow-0 detail-btn" style="float: left;" @click="custom">联系客服</view>
						<view class="box-grow-0 detail-btn" style="margin-left: 10rpx;" @click="call(phone)">拨打电话
						</view>
					</view>


				</view>

				<!--------------商品信息 end 商品列表---------------->
				<view v-if="orderDetail.platform" class="order-label"
					style="font-weight: normal;border-top: 1rpx solid #E2E2E2;padding: 30rpx 24rpx">
					{{ orderDetail.platform }}
				</view>
				<view class='goods-box composition' v-if="sign == 'composition'">
					<view class="composition-item" v-for='(list, idx) in orderDetail.composition_list' :key='idx'>
						<view class="main-between composition-title">
							<view class="composition-type" v-if="list.type == 1">固定套餐</view>
							<view class="composition-type" v-else>搭配套餐</view>
							<view>套餐总价 ￥{{ list.total_price }}</view>
						</view>
						<view class="goods-list" v-for='(item, index) in list.goods_list' :key='index'>
							<sol-order-goods-info :plugin="list.type == 2 ?sign : ''" v-if="list.show || index == 0"
								style="width:100%;" :goods='item' :plugin-data="orderDetail.plugin_data"
								:plugin-index="index"></sol-order-goods-info>
							<!-- 无售后记录 且 未超过售后时间 才可申请售后 -->
							<!-- <block v-if='orderDetail.is_send == 1 && (list.show || index == 0)'>
								<view class='dir-left-nowrap sale-box'>
									<view class='box-grow-1'></view>
									<view class='box-grow-0 dir-top-nowrap'>
										<block v-if="orderDetail.detail[index].is_show_apply_refund && orderDetail.goods_type !== 'ecard'">
											<app-jump-button
												:url="`/pages/order/refund/select-refund-type?id=${orderDetail.detail[index].id}&sign=${orderDetail.sign}`">
												<view size='mini' class='sale-server detail-btn'>申请售后</view>
											</app-jump-button>
										</block>
										<block v-else-if="orderDetail.detail[index].refund">
											<text class='refund-status'>
												已申请售后({{ orderDetail.detail[index].refund.status_text }})
											</text>
										</block>
									</view>
								</view>
							</block> -->
						</view>
						<view class="composition-open main-center">
							<view @click="toggle(idx)" class="composition-btn">
								<text>{{ list.show ? '点击收起套餐详情' : '点击展开套餐详情' }}</text>
								<image v-if="!list.show" src="/static/image/icon/icon-down.png"></image>
								<image v-else src="/static/image/icon/icon-up.png"></image>
							</view>
						</view>
					</view>
				</view>
				<view class='goods-box' v-else>
					<view v-for='(item, index) in orderDetail.detail' :key='index'>
						<!-- 添加从哪家店买的/从哪个视频进来的   10.18 修改page_url为空时的状况 -->
						<app-jump-button
							:url="orderDetail.mch_id == 0 ? (orderDetail.sign == 'miaosha' ? '/plugins/mch_solitaire/seckillgoods/seckillgoods?id='+item.goods_id : '/plugins/mch_solitaire/togoods/togoods?id='+item.goods_id) : '/plugins/mch_solitaire/goods/goods?id='+item.goods_id+'&mch_id='+orderDetail.mch_id">
							<sol-order-goods-info style="width:100%;" :goods='item.goods_info'
								:plugin-data="orderDetail.plugin_data" :plugin-index="index"></sol-order-goods-info>
						</app-jump-button>
						<!-- 无售后记录 且 未超过售后时间 才可申请售后 -->
						<!-- <block v-if='orderDetail.is_send == 1'>
							<view class='dir-left-nowrap sale-box'>
								<view class='box-grow-1'></view>
								<view class='box-grow-0 dir-top-nowrap'>
									
									<block v-if="item.is_show_apply_refund && orderDetail.goods_type !== 'ecard'">
										<app-jump-button
											:url="`/plugins/mch_solitaire/order/refund/select-refund-type?id=${item.id}&sign=${orderDetail.sign}`">
											<view size='mini' class='sale-server detail-btn'>申请售后</view>
										</app-jump-button>
									</block>
									<block v-else-if="item.refund">
										<text class='refund-status'>已申请售后({{ item.refund.status_text }})</text>
									</block>
								</view>
							</view>
						</block> -->
					</view>
				</view>

				<!-- -----------其他信息---------------- -->
				<block
					v-if="(orderDetail.sign === 'booking' || orderDetail.sign === 'vip_card') && orderDetail.order_form && orderDetail.order_form.length">
					<view class="order-label">其他信息</view>
					<view class="order-form order-list">
						<view v-for="(formItem, k) in orderDetail.order_form" :key="k" class="order-form-box">
							<view v-if="formItem.key === 'img_upload'" class="dir-top-nowrap">
								<view class="box-grow-0">{{ formItem.label }}：</view>
								<view class="dir-left-wrap">
									<block v-if="Array.isArray(formItem.value)">
										<image v-for="(img, l) in formItem.value" :key="l" v-if="img" @click="look(img)"
											:src="img" style="margin-right:16rpx;margin-bottom:16rpx"></image>
									</block>
									<image v-else-if="formItem.value" @click="look(formItem.value)"
										:src="formItem.value"></image>
								</view>
							</view>
							<view v-else class="dir-left-nowrap">
								<view class="box-grow-0">{{ formItem.label ? formItem.label : formItem.key_name }}：
								</view>
								<view class="box-grow-1 text">{{ formItem.value ? formItem.value : '' }}</view>
							</view>
						</view>
					</view>
				</block>
				<block v-else-if="formList && formList.length">
					<view class="order-label">其他信息</view>
					<view v-for="(formAll, i) in formList" :key="i" class="order-form order-list">
						<sol-order-goods-info v-if="isShowFormGoods" v-for="(goods,j) in formAll" :key="j"
							style="width:100%;" :goods='goods.goods_info' :plugin-data="orderDetail.plugin_data"
							:plugin-index="i"></sol-order-goods-info>
						<view v-for="(formItem, k) in formAll[0]['form_data']" :key="k" class="order-form-box">
							<view v-if="formItem.key === 'img_upload'" class="dir-top-nowrap">
								<view class="box-grow-0">{{ formItem.label }}：</view>
								<view class="dir-left-wrap">
									<block v-if="Array.isArray(formItem.value)">
										<image v-for="(img, l) in formItem.value" :key="l" v-if="img" @click="look(img)"
											:src="img" style="margin-right:16rpx;margin-bottom:16rpx"></image>
									</block>
									<image v-else-if="formItem.value" @click="look(formItem.value)"
										:src="formItem.value"></image>
								</view>
							</view>
							<view v-else class="dir-left-nowrap">
								<view class="box-grow-0">{{ formItem.label }}：</view>
								<view class="box-grow-1 text">{{ formItem.value ? formItem.value : '' }}</view>
							</view>
						</view>
					</view>
				</block>
				<block>
					<view class='action-box dir-left-nowrap main-right' v-if="orderDetail.status_text=='待收货'">
						<view class='box-grow-0 btn' style="margin-right: 10rpx;" @click="logistics(orderDetail)">查看物流
						</view>
					</view>
				</block>
				<block
					v-if="(orderDetail.is_pay == 1 || orderDetail.pay_type == 2) && orderDetail.is_send == 0 && orderDetail.status == 1 && orderDetail.detailExpressRelation.length == 0 && orderDetail.cancel_status != 1">
					<view v-if="orderDetail.sign !='gift'" class='action-box dir-left-nowrap main-right'>
						<view @click='toDeliver(orderDetail)' class='box-grow-0 btn fahuo'>提醒发货</view>
						<view @click='cancel(orderDetail)' class='box-grow-0 btn'>申请退款</view>
					</view>
				</block>
			</view>
		</view>
	</app-layout>
</template>
<script>
	import {
		mapState
	} from "vuex";
	import solOrderGoodsInfo from "../../components/sol-order-goods-info.vue";
	import appOrderExpress from "../../../../components/page-component/app-order-express/app-order-express.vue";
	import appOrderBanner from "../../../../components/page-component/app-order-banner/app-order-banner.vue";
	import order from "../order.js";

	let mallurl = null

	export default {
		components: {
			"sol-order-goods-info": solOrderGoodsInfo,
			"app-order-express": appOrderExpress,
			"app-order-banner": appOrderBanner,
		},
		data() {
			return {
				order_id: null,
				orderDetail: {
					detailExpressRelation: [],
					detailExpress: [],
				},
				is_show: false,
				advance_order: {
					goods_num: 0
				},
				detail: [],
				sign: '',
				ecard: [],
				isShowFormGoods: false,
				mall_id: 1,
				phone: '17751272746',
				storageArr:JSON.parse(uni.getStorageSync("lastData")|| "[]")//在data 初始化一个数组
			}
		},
		computed: {
			formList() {
				const self = this;
				let orderDetail = self.orderDetail.detail;
				let newArr = {};
				let form_ids = [];

				if (orderDetail && orderDetail.length) {
					for (let goods of orderDetail) {
						if (goods.form_id == '0') {
							continue;
						}
						if (form_ids.indexOf(goods.form_id) === -1) {
							form_ids.push(goods.form_id);
							newArr[goods.form_id] = [goods];
						} else {
							newArr[goods.form_id].push(goods);
						}
					}
				}
				self.isShowFormGoods = form_ids.length > 1;
				return Object.values(newArr);
			},
			getPageUrl() {
				let orderDetail = this.orderDetail;
				if (orderDetail.is_send == 1 && orderDetail.detailExpress.length == 0) {
					let coverPic = '';
					orderDetail.detail.forEach(function(item, index) {
						if (index === 0) {
							coverPic = item.goods_info.pic_url;
						}
					});
					return `/pages/order/express-detail/express-detail?express=${orderDetail.express}&customer_name=${orderDetail.customer_name}&express_no=${orderDetail.express_no}&cover_pic=${coverPic}`
				} else if (orderDetail.is_send == 1 && orderDetail.detailExpress.length == 1) {
					let express = orderDetail.detailExpress[0].express;
					let merchant_remark = orderDetail.detailExpress[0].merchant_remark;
					let express_no = orderDetail.detailExpress[0].express_no;
					let customer_name = orderDetail.detailExpress[0].customer_name;
					let cover_pic = orderDetail.detailExpress[0].expressRelation[0].orderDetail.goods_info.goods_attr
						.cover_pic;
					return `/pages/order/express-detail/express-detail?express=` + express + `&customer_name=` +
						customer_name + `&express_no=` + express_no + `&cover_pic=` + cover_pic +
						`&merchant_remark=` + merchant_remark
				} else if (orderDetail.detailExpress.length >= 1) {
					return '/pages/order/express-list/express-list?order_id=' + orderDetail.id;
				}
			},
			...mapState({
				storemall: state => state.malid.apimaUrl
			}),
		},
		methods: {
			// 发送提醒请求
			async getDeliver(){				
				const res  = await this.$request({
					url:this.$apiSol.order.remind_shipping,
					method:'post',
					data:{
						order_no:this.orderDetail.order_no
					}
				})
				// console.log(res.data.updated_at,"我是请求发货文件");
				let  orderData={
					order_no:this.orderDetail.order_no,
					date:res.data.updated_at,
					
				}
				
				this.storageArr.push(orderData)
				// 信息存储在本地
				uni.setStorageSync("lastData",JSON.stringify(this.storageArr))  
			},
			
			// 点击
			toDeliver(order){
				// 从本地获取存储的时间				
			// let lastData=JSON.parse(uni.getStorageSync("lastData")|| "[]" )			
						// 如果长度为空 直接请求
			if(this.storageArr.length === 0){
					this.getDeliver()					
				}else{
					// 如果长度不为空,循环本地信息
					this.storageArr.map(item=>{
						// 如果单号和当前单号相等
						if(item.order_no == order.order_no){
							let date =new Date() //获取当前时间
							const starttime =item.date //获取上次点击催单时间
							// 把当前时间格式处理好
							const hh=date.getHours()
							const mm =date.getMinutes()
							const ss = date.getSeconds()
							const nowtime =date.getFullYear() + '-' +parseInt(date.getMonth() + 1) + '-' +date.getDate()+" "+hh+":"+mm+':'+ss
							// console.log(starttime,nowtime);
							// 获取两个时间差
							// console.log(this.getDiffDay(nowtime,starttime));
							// 如果时间差等于0 说明当天已经提醒过发货
							if(this.getDiffDay(nowtime,starttime) == 0){
								uni.showToast({
									title:"今天已经提醒过商家发货",
									icon:'none',
									duration:1500
								})
							}else {
								uni.showToast({
									title:"已经提醒商家",
									duration:1500
								})
								this.getDeliver()
								
							}
						}else{
							uni.showToast({
								title:"已经提醒商家",
								duration:1500
							})
							this.getDeliver()
							
						}
					})
				}
			},
			// 获取时间差
			getDiffDay(date_1, date_2){
			      // 计算两个日期之间的差值
			      let totalDays,diffDate
			      let myDate_1 = Date.parse(date_1)
			      let myDate_2 = Date.parse(date_2)
			      // 将两个日期都转换为毫秒格式，然后做差
			      diffDate = Math.abs(myDate_1 - myDate_2) // 取相差毫秒数的绝对值
			      //diffDate = Number(myDate_1 - myDate_2) // 取相差毫秒数常数值
			      totalDays = Math.floor(diffDate / (1000 * 3600 * 24)) // 向下取整
			      return totalDays    // 相差的天数
			    },
		
			// 获取电话
			async getPhone() {
				const res = await this.$request({
					url: this.$apiSol.navs.index,
					method: 'get',
					data: {
						id: 28,
					}
				})
				console.log("eeeeeeeeee",  res.data.list[114].params.describe)
				this.phone= res.data.list[114].params.describe
			
			},
			// 拨打电话
			call(phone) {
				console.log('传入的电话', phone);
				const res = uni.getSystemInfoSync();
				// ios系统默认有个模态框
				if (res.platform == 'ios') {
					uni.makePhoneCall({
						phoneNumber: phone,

						success() {
							console.log('拨打成功了');
						},
						fail() {
							console.log('拨打失败了');
						}
					})
				} else {
					//安卓手机手动设置一个showActionSheet
					uni.showActionSheet({
						itemList: [phone, '呼叫'],
						success: function(res) {
							console.log(res);
							if (res.tapIndex == 1) {
								uni.makePhoneCall({
									phoneNumber: phone,
								})
							}
						}
					})
				}

			},
			// 客服
			custom() {
				// 9.8 注释
				/* if (this.kefu != '') {
					uni.navigateTo({
						url: '/pages/web/web?url=' + encodeURIComponent(this.kefu)
					})
				} else {
					uni.navigateTo({
						url: '/pages/web/web?url=' + this.mall.setting.web_service_url
					})
				} */
				// 9.8 修改客服
				if (wx.openCustomerServiceChat) {
					wx.openCustomerServiceChat({
						extInfo: {
							url: 'https://work.weixin.qq.com/kfid/kfc2132bcfa45f0fb28'
						},
						corpId: 'ww4e635c5ebdf96587',
						showMessageCard: true
					})
				} else {
					uni.showModal({
						title: '版本不支持',
						content: '请下载最新版本微信',
						showCancel: false,
						confirmText: '我知道了'
					})
				}
			},
			// 跳转物流链接
			logistics(orderDetail) {
				if (orderDetail.is_send == 1 && orderDetail.detailExpress.length == 0) {
					// 兼容
					let [id, express, express_no, customer_name, cover_pic] = [orderDetail.id, orderDetail.express,
						orderDetail.express_no, orderDetail.customer_name, orderDetail.detail[0].goods_info.pic_url
					];
					uni.navigateTo({
						url: `/pages/order/express-detail/express-detail?id=${id}&express=${express}&express_no=${express_no}&customer_name=${customer_name}&cover_pic=${cover_pic}`
					})
				} else if (orderDetail.is_send == 1 && orderDetail.detailExpress.length == 1 && orderDetail.send_type !=
					2) {
					let express = orderDetail.detailExpress[0].express;
					let merchant_remark = orderDetail.detailExpress[0].merchant_remark;
					let express_no = orderDetail.detailExpress[0].express_no;
					let customer_name = orderDetail.detailExpress[0].customer_name;
					let cover_pic = orderDetail.detailExpress[0].expressRelation[0].orderDetail.goods_info.goods_attr
						.cover_pic;
					uni.navigateTo({
						url: `/pages/order/express-detail/express-detail?express=` + express + `&customer_name=` +
							customer_name + `&express_no=` + express_no + `&cover_pic=` + cover_pic +
							`&merchant_remark=` + merchant_remark
					})
				} else if (orderDetail.detailExpress.length >= 1) {
					uni.navigateTo({
						url: '/pages/order/express-list/express-list?order_id=' + orderDetail.id
					});
				}
			},
			look(e) {
				uni.previewImage({
					current: e, // 当前显示图片的http链接
					urls: [e] // 需要预览的图片http链接列表
				})
			},
			toggle(index) {
				this.orderDetail.composition_list[index].show = !this.orderDetail.composition_list[index].show;
				this.$forceUpdate();
			},
			getOrderDetail() {
				let self = this;
				let url = self.$apiSol.order.detail
				self.$showLoading();
				self.$request({
					url: url,
					data: {
						id: self.order_id,
					}
				}).then(response => {
					self.$hideLoading();
					self.is_show = true;
					if (response.code == 0) {
						self.orderDetail = response.data.detail;
						self.ecard = [self.orderDetail.type_data.ecard[0]];
						if (self.sign == 'composition') {
							for (let i in self.orderDetail.composition_list) {
								self.orderDetail.composition_list[i].show = false;
							}
						}
						// 11.15 显示有分享，但未分享价格 显示的全款和实体店需付 
						if (self.orderDetail.isgoodshare == 2) {
							self.orderDetail.total_goods_original_price = self.orderDetail
								.total_originalcost_price
							self.orderDetail.original_discount_price = self.orderDetail
								.total_originalcost_price - self.orderDetail.total_goods_price
							self.orderDetail.detail.forEach(item => {
								item.goods_info.total_original_price = item.total_originalcost_price
							})
						}
						// console.log(self.orderDetail);
					} else {
						uni.showModal({
							title: '',
							content: response.msg,
							showCancel: false,
						});
					}
				}).catch(() => {
					self.$hideLoading();
				});
			},
			copyText(orderNo) {
				order.copyText(orderNo)
			},
			copyTextEcard(item) {
				let str = ``;
				for (let i = 0; i < item.length; i++) {
					str += `${item[i].key}:${item[i].value}\n`
				}
				order.copyText(str);
			},
			navigation(orde) {
				if (orde.showstore) {
					uni.openLocation({
						latitude: parseFloat(orde.showstore.latitude),
						longitude: parseFloat(orde.showstore.longitude),
						name: orde.showstore.name,
						address: orde.showstore.address,
					})
				} else {
					uni.openLocation({
						latitude: parseFloat(orde.store.latitude),
						longitude: parseFloat(orde.store.longitude),
						name: orde.store.name,
						address: orde.store.address,
					})
				}
			},
			// 取消 | 申请退款
			cancel(e) {
				let self = this;
				uni.navigateTo({
					url: '/plugins/mch_solitaire/order/refund/order-refund?id=' + e.id
				});
			},
			cancelAction(e) {
				let self = this;
				let url = self.$apiSol.order.cancel
				let prourl = self.$apiSol.advance.order_detail
				uni.showLoading({
					title: '取消中'
				});
				self.$request({
					url: url,
					data: {
						id: e.id
					}
				}).then(response => {
					uni.hideLoading();
					if (response.code === 0) {
						if (self.sign === 'advance') {
							self.$request({
								url: prourl,
								method: 'get',
								data: {
									id: self.order_id,
								}
							}).then(response => {
								self.is_show = true;
								if (response.code === 0) {
									self.orderDetail = response.data.detail;
								} else {
									uni.showModal({
										title: '',
										content: response.msg,
										showCancel: false,
									});
								}
							})
						} else {
							self.getOrderDetail();
						}
					} else {
						uni.showModal({
							title: '',
							content: response.msg,
							showCancel: false,
						});
					}
				}).catch(() => {
					uni.hideLoading();
				});
			},
			mobile: function() {
				uni.makePhoneCall({
					phoneNumber: this.orderDetail.city.mobile,
				})
			},
			// 电子卡密使用说明
			go_eCard() {
				let encurl = this.$apiSol.ecard.index
				uni.navigateTo({
					url: `/pages/rules/index?url=${encodeURIComponent(encurl)}&key=content&data=${JSON.stringify({order_id: this.orderDetail.id})}`,
				});
			}
		},
		onLoad(options) {
			this.mall_id = options.mall_id
			this.order_id = options.id;
			this.sign = options.sign;
			this.getPhone()
		},
		onShow() {
			let self = this;
			let url = self.$apiSol.advance.order_detail
			let interval = setInterval(function() {
				if (self.sign === 'advance') {
					self.$request({
						url: url,
						method: 'get',
						data: {
							id: self.order_id,
						}
					}).then(response => {
						self.is_show = true;
						if (response.code === 0) {
							self.orderDetail = response.data.detail;
							// // 11.15 有分享，但未分享
							// if (self.orderDetail.isgoodshare == 2) {
							// 	self.orderDetail.total_goods_original_price = self.orderDetail
							// 		.total_originalcost_price
							// 	self.orderDetail.original_discount_price = self.orderDetail
							// 		.total_originalcost_price - self.orderDetail.total_goods_price
							// }
							// // console.log(self.orderDetail);
						} else {
							uni.showModal({
								title: '',
								content: response.msg,
								showCancel: false,
							});
						}
					})
				} else {
					self.getOrderDetail();
				}
				clearInterval(interval);
			}, 300);
		}
	}
</script>
<style scoped lang="scss">
	.order-detail-box {
		font-size: $uni-font-size-general-one;
		color: $uni-general-color-one;
		position: relative;
		width: 100%;
		height: 100%;
	}

	.order-label {
		padding: #{32rpx} #{24rpx};
		font-size: #{30rpx};
		color: #353535;
		font-weight: bold;
		background: #FFFFFF;
		border-bottom: #{1rpx} solid #e2e2e2;
	}

	.goods-image {
		margin-right: #{20rpx};
		margin-bottom: #{20rpx};
	}

	.goods-num {
		font-size: #{24rpx};
		color: #999999;
		margin: #{20rpx} 0;
	}

	.order-form {
		background: #FFFFFF;

		.order-form-box {
			padding: #{5rpx} 0;

			span {}

			image {
				height: #{174rpx};
				width: #{174rpx};
				display: block;
				margin-top: #{15rpx};
			}
		}

	}

	.order-list {
		background: #FFFFFF;
		padding: #{32rpx} #{24rpx};
		margin-bottom: #{20rpx};

		>view {
			margin-bottom: #{10rpx};
		}

		.text {
			word-wrap: break-word;
		}

		>view:last-child {
			margin-bottom: 0;
		}

		.order-list-btn {
			border: 1#{rpx} solid #bbbbbb;
			border-radius: 30#{rpx};
			padding: 10#{rpx} 30#{rpx};
			display: inline-block;
			margin-left: calc(100vw - #{170rpx});
		}
	}

	.order-form:last-child {
		border-bottom: none;
	}

	.express-box {
		background: #fff;
		padding: 32#{rpx} 24#{rpx};
		margin-bottom: 20#{rpx};
	}

	.address-box {
		background: #fff;
		padding: 32#{rpx} 24#{rpx};
		margin-bottom: 20#{rpx};

		.address {
			word-wrap: break-word;
		}
	}

	.address-box .text {
		margin-top: 10#{rpx};
	}

	.delivery {
		.deliveryman {
			width: #{72rpx};
			height: #{72rpx};
			display: block;
			margin-right: #{24rpx};
		}

		.delivery-tips {
			font-size: $uni-font-size-weak-one;
			color: $uni-general-color-two;
			margin-bottom: #{16rpx};
		}

		.mr-16 {
			margin-right: #{16rpx};
		}

		.delivery-mobile {
			width: #{96rpx};
			border-left: #{1rpx} solid #e2e2e2;

			.mobile {
				width: #{40rpx};
				height: #{40rpx};
				display: block;
				margin-right: #{16rpx};
			}
		}

		.content {
			width: #{500rpx};
		}
	}

	.order-info-box {
		background: #fff;
		padding: 32#{rpx} 24#{rpx};
		margin-bottom: 20#{rpx};
	}

	.store-info-box {
		background: #fff;
		padding: 32#{rpx} 24#{rpx};
		margin-bottom: 20#{rpx};
	}

	.preferential-box {
		background: #fff;
		padding: 32#{rpx} 24#{rpx};
		border-bottom: 1#{rpx} solid $uni-weak-color-one;
	}

	.preferential-box .item {
		margin: 5#{rpx} 0;
	}

	.order-price-box {
		height: 100#{rpx};
		background: #fff;
		padding: 32#{rpx} 24#{rpx};
		//margin-bottom: 20#{rpx};
	}

	.goods-box {
		background: #fff;
		padding: 32#{rpx} 24#{rpx};
		margin-bottom: 20#{rpx};

		&.composition {
			padding: 0;
			padding-bottom: #{8rpx};
			margin-bottom: 0;
			background-color: #f7f7f7;
		}

		.composition-item {
			margin-bottom: #{20rpx};
			background-color: #fff;

			.composition-open {
				text-align: center;
				background-color: #fff;
				height: #{84rpx};

				.composition-btn {
					display: inline-block;
					border: #{2rpx} solid #bbbbbb;
					font-size: #{24rpx};
					color: #999999;
					padding: 0 #{24rpx};
					margin: #{12rpx} 0 #{16rpx};
					height: #{56rpx};
					line-height: #{54rpx};
					border-radius: #{28rpx};

					image {
						width: #{22rpx};
						height: #{12rpx};
						margin-left: #{16rpx};
					}
				}
			}

			.goods-list {
				padding: 0 #{24rpx};
			}

			.composition-title {
				height: #{80rpx};
				line-height: #{80rpx};
				padding: 0 #{24rpx};
				font-size: #{28rpx};
				color: #353535;
				margin-bottom: #{24rpx};
				border-bottom: #{2rpx} solid #e2e2e2;

				.composition-type {
					color: #f39800;
				}
			}
		}
	}

	.goods-box .sale-server {
		margin-top: 20#{rpx};
	}

	.goods-box .sale-box {
		padding-bottom: 15#{rpx};
	}

	.goods-box .refund-status {
		margin-top: 15#{rpx};
		color: $uni-important-color-black;
	}

	.action-box {
		background: #fff;
		padding: 32#{rpx} 24#{rpx};

		.cancel-text {
			font-size: $uni-font-size-import-two;
		}

		.btn {
			border: 1#{rpx} solid #bbbbbb;
			border-radius: 30#{rpx};
			padding: 10#{rpx} 30#{rpx};
		}
	}

	.detail-btn {
		border: 1#{rpx} solid #bbbbbb;
		border-radius: 30#{rpx};
		padding: 10#{rpx} 30#{rpx};
	}

	.e-box {
		width: 100%;
		height: #{100rpx};
		padding: 0 #{24rpx};
		background: #ffffff;
		margin-bottom: #{20rpx};

		.img {
			width: 12#{rpx};
			height: 24#{rpx};
		}

		.express-name {
			margin-bottom: 15#{rpx};
		}

		.text {
			color: #353535;
			font-size: #{28rpx};
		}
	}

	.advance {
		width: #{702rpx};
		border-radius: #{16rpx};
		background-color: #f7f7f7;
		padding: #{32rpx 24rpx};

		.title {
			font-size: #{24rpx};
			color: #ff4544;
			margin-bottom: #{15rpx};
		}
	}

	.item-box {
		border: #{1rpx} solid #c2c2c2;
		padding: #{24rpx};
		border-radius: #{16rpx};
		width: #{702rpx};
	}

	.ecard {
		background-color: #ffffff;

		.item {
			padding: #{32upx 24upx 0 24upx};

			.text {
				font-size: #{23upx};
				line-height: 1.5;
				padding-left: #{15upx};
			}
		}

		.expand {
			height: #{70upx};
			margin-top: #{20upx};
			border-top: #{1upx} solid #e2e2e2;

			>image {
				width: #{20upx};
				height: #{12upx};
			}

			>text {
				font-size: #{23upx};
				color: #919191;
			}
		}
	}

	.instructions {
		width: #{12upx};
		height: #{22upx};
		margin-left: #{18upx};
	}

	.ecard-info {
		height: #{90upx};
		line-height: #{90upx};
		background-color: #ffffff;
		padding: #{0 22upx};
		margin-bottom: #{13upx};
	}

	.city-service {
		width: 100%;
		margin-bottom: 10#{rpx};

		.await-man {
			margin-left: #{12rpx};
			font-size: #{28rpx};
			color: #666666;
		}

		.info-box {
			margin-left: #{12rpx};

			.info-label {
				margin-bottom: #{10rpx};
				color: #999999;
				font-size: #{28rpx};
			}
		}

		.head {
			width: #{75rpx};
			height: #{75rpx};
		}

		.icon-box {
			padding: 0 #{30rpx};
			border-left: #{1rpx} solid #f7f7f7;

			.icon {
				width: #{45rpx};
				height: #{45rpx};
			}
		}
	}
	.fahuo{
		margin-right: 12rpx;
	}
</style>
